<template>
	<transition name="fade">
		<el-tabs
			:class="['v-history', type]"
			v-show="visible"
			v-model="active"
			type="card"
			@tab-remove="deleteTabs"
			lazy
			@tab-click="tabChange"
		>
			<el-tab-pane name="/" :closable="false">
				<template #label>
					<div class="label">
						<home-filled
							:style="{
								color: route.path == '/' || route.path == '' ? 'rgb(45, 140, 240)' : '#ccc',
								width: '15px',
								height: '15px',
								verticalAlign: '-3px',
							}"
						/>
						首页
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane closable v-for="item in historyList" :key="item.title" :name="item.fullPath">
				<template #label>
					<div class="label">
						<div
							:class="[
								'dot-icon',
								{
									active: item.path == route.path,
								},
							]"
						></div>
						{{ item.title }}
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>
	</transition>
</template>

<script setup>
import { computed } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useSettingStore } from "/store/setting"
import { useHistoryStore } from "/store/history"
import { useTabs } from "./modules/useTabs"

const route = useRoute()
const router = useRouter()

const settingStore = useSettingStore()
const historyStore = useHistoryStore()

const historyList = computed(() => historyStore.historyList)

const { active, startWatch, deleteTabs, tabChange } = useTabs(historyStore, router, route)
let stop = null

const visible = computed(() => {
	if (settingStore.tab.visible) {
		stop = startWatch()
	} else {
		stop && stop()
	}
	return settingStore.tab.visible
})
const type = computed(() => settingStore.tab.type)
</script>

<style lang="scss" scoped>
.v-history {
	--height: 40px;
	background: var(--background);
	height: var(--height);
	overflow: hidden;
	width: 100%;
	flex: none;
	:deep() {
		.el-tabs__header {
			margin-bottom: 0;
			border: 0;
		}
		.el-tabs__nav-wrap {
			.el-tabs__nav.is-top {
				border: 0;
				height: var(--height);
				.el-tabs__item.is-top {
					background: var(--content-background);
					padding-left: 0;
					padding-right: 0;
					height: 100%;
					border: 0;
				}
			}
		}
		.el-tabs__content {
			display: none !important;
		}
	}
	&.shape {
		:deep() {
			.el-tabs__nav-wrap {
				.el-tabs__nav.is-top {
					position: relative;
					padding-top: 7px;
					padding-left: 20px;

					.el-tabs__item.is-top {
						position: relative;
						z-index: 2;
						height: 34px;
						line-height: 34px;
						text-align: left;
						display: inline-flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 5px 5px 0 0;
						padding-left: 10px;
						padding-right: 20px;
						margin-right: 10px;
						color: var(--el-text-color-placeholder);
						background: transparent;
						transition: var(--transition);
						&::before,
						&::after {
							content: "";
							position: absolute;
							width: 20px;
							height: 20px;
							bottom: 0;
							background: transparent;
							border-radius: 50%;
							opacity: 0;
							transition: var(--transition);
						}
						&::before {
							left: -20px;
							box-shadow: 10px 10px 0 5px var(--content-background);
						}
						&::after {
							right: -20px;
							box-shadow: -10px 10px 0 5px var(--content-background);
						}
						&.is-active {
							background: var(--content-background);
							color: var(--el-text-color-regular);
							&::before,
							&::after {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
	&.card {
		:deep() {
			.el-tabs__nav-wrap {
				.el-tabs__nav.is-top {
					position: relative;
					padding-top: 5px;
					padding-left: 10px;
					padding-right: 10px;
					.el-tabs__item.is-top {
						position: relative;
						z-index: 2;
						height: 30px;
						line-height: 30px;
						text-align: left;
						padding-left: 10px;
						padding-right: 20px;
						display: inline-flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 5px;
						box-shadow: 0 0 5px 0 rgba(#000, 0.05);
						margin-right: 10px;
					}
				}
			}
		}
	}
	.label {
		min-width: 100px;
		white-space: nowrap;
	}
	&.fade-enter-active,
	&.fade-leave-active {
		transition: var(--transition);
	}
	&.fade-enter-from,
	&.fade-leave-to {
		height: 0;
	}
}
</style>
